
import { 
  AmbientLight,
  AxesHelper,
  CubicBezierCurve3,
  Geometry,
  Line,
  LineBasicMaterial,
  LineCurve3,
  PerspectiveCamera, Scene, sRGBEncoding, Vector3, WebGLRenderer 
} from "three"
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
import stats from '../utils/stats'

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(-34, -95, 26)
camera.lookAt(0, 0, 0)

const geometry = new Geometry()
const curve = new CubicBezierCurve3(
  // v0 – 起点
  new Vector3(-10, -20, -10),
  // v1 – 第一个控制点
  new Vector3(-10, 40, -10),
  // v2 – 第二个控制点
  new Vector3(10, 40, 10),
  // v3 – 终点
  new Vector3(10, -20, -10)
)
const points = curve.getPoints(100)
geometry.setFromPoints(points)
const material = new LineBasicMaterial({color: 0xff0000})
const line = new Line(geometry, material)
scene.add(line)

scene.add(new AmbientLight(0xffffff))

// 添加坐标系，方便理解
const axes = new AxesHelper(20)
scene.add(axes)

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.outputEncoding = sRGBEncoding

document.body.appendChild(renderer.domElement)
const trackballControls = new TrackballControls(camera, renderer.domElement)

function render() {
  stats.update()
  trackballControls.update()

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()